<template>
  <div>
    <NavHeader />
    <div class="placeholder"></div>
    <friendNotice @selectEmit="onSelect" />
    <friendItem :friendList="friendList" />
  </div>
</template>

<script setup lang="ts">
import friendItem from './src/friendItem.vue';
import friendNotice from './src/friendNotice.vue';
import NavHeader from '@/components/header';
import { getFriendList } from "@/api/user"
import { userStore } from '@/store/user';
import { ref } from "vue";

const friendList = ref({})

const user_store = userStore()
const userInfo = user_store.$state.userInfo

const onGetFriendList = () => {
  getFriendList().then(res => {
    res.data.result.forEach((item: any, index: number) => {
      if (item.friend_id === userInfo._id) {
        let info = {}, id = ""
        info = item.u_info
        id = item.u_id
        item.u_id = item.friend_id
        item.u_info = item.friend_info
        item.friend_info = info
        item.friend_id = id
      }
    })
    friendList.value = res.data.result
  })
}
onGetFriendList()
const onSelect = () => {
  onGetFriendList()
}
</script>

<style scoped lang="less">
.placeholder {
  height: 80px;
}
</style>